<!--
 * @Description: 学科管理  学科
 * @Author: 毕富成
 * @Date: 2022-09-17 11:29:06
 * @LastEditTime: 2022-09-21 10:33:08
 * @LastEditors: 毕富成
-->
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row class="test">
          <el-col :span="18">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="学科名称">
                <el-input v-model="formInline.user"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="default" @click="onClean">清除</el-button>
                <el-button type="primary" @click="getSubjectList">
                  搜索
                </el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6" style="text-align:right">
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              @click="dialogVisible = true"
            >
              <span>新增学科</span>
            </el-button>
          </el-col>
        </el-row>
        <el-alert
          style="margin-bottom: 15px;"
          :title="`数据一共${searchPageParms.total}条`"
          type="info"
          show-icon
          :closable="false"
        ></el-alert>
        <template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="48"
            ></el-table-column>
            <el-table-column
              prop="subjectName"
              label="学科名称"
            ></el-table-column>
            <el-table-column prop="username" label="创建者"></el-table-column>
            <el-table-column label="创建日期" width="160">
              <!-- 作用域插槽 -->
              <template v-slot="{ row }">
                {{ row.addDate | formatDate }}
              </template>
            </el-table-column>
            <el-table-column label="前台是否显示">
              <!-- 作用域插槽 -->
              <template v-slot="{ row }">
                {{ row.isFrontDisplay === 1 ? '是' : '否' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="twoLevelDirectory"
              label="二级目录"
              width="97"
            ></el-table-column>
            <el-table-column
              prop="tags"
              label="标签"
              width="97"
            ></el-table-column>
            <el-table-column
              prop="totals"
              label="题目数量"
              width="97"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="240">
              <template v-slot="{ row }">
                <el-button
                  type="text"
                  @click="
                    $router.push(
                      `/subjects/directorys?subjectID=${row.id}&subjectName=${row.subjectName}`
                    )
                  "
                >
                  学科分类
                </el-button>
                <el-button
                  type="text"
                  @click="
                    $router.push(
                      `/subjects/tags?subjectID=${row.id}&subjectName=${row.subjectName}`
                    )
                  "
                >
                  学科标签
                </el-button>
                <el-button type="text" @click="editSubject(row.id)">
                  修改
                </el-button>
                <el-button type="text" @click="delSubject(row.id)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div class="block">
          <el-pagination
            style="margin-top: 20px; text-align: right;"
            background
            :current-page.sync="searchPageParms.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="searchPageParms.pagesize"
            layout="  prev,pager,next,sizes,jumper"
            :total="searchPageParms.total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          ></el-pagination>
        </div>
      </el-card>
      <el-dialog
        :title="showText"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
        @close="diaClose"
      >
        <el-form
          ref="dialogForm"
          :rules="dialogRules"
          :model="dialogForm"
          label-width="80px"
        >
          <el-form-item label="学科名称" prop="subjectName">
            <el-input v-model="dialogForm.subjectName"></el-input>
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch
              v-model="dialogForm.isFrontDisplay"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSubject">
            确 定
          </el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { list, add, detail, update, remove } from '@/api/hmmm/subjects.js'
export default {
  data() {
    return {
      searchPageParms: {
        page: 1,
        pagesize: 5,
        total: 50
      },
      formInline: {
        user: ''
      },
      tableData: [],
      dialogVisible: false,
      // 弹出层表格
      dialogForm: {
        isFrontDisplay: 1,
        subjectName: null,
        id: null
      },
      // 弹出层校验
      dialogRules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    showText() {
      return this.dialogForm.id ? '修改学科' : '新增学科'
    }
  },
  created() {
    this.getSubjectList()
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    // 请求table数据并储存到data
    async getSubjectList() {
      try {
        const { data } = await list({
          page: this.searchPageParms.page,
          pagesize: this.searchPageParms.pagesize,
          subjectName: this.formInline.user
        })
        // console.log(data)
        this.tableData = data.items
        this.searchPageParms.total = data.counts
      } catch (err) {
        console.log(err)
      }
    },
    // 点击前往某页
    handleCurrentChange(newPage) {
      this.searchPageParms.page = newPage
      this.getSubjectList()
    },
    // 点击更改每页数量
    handleSizeChange(pageSize) {
      this.searchPageParms.pagesize = pageSize
      this.getSubjectList()
    },
    onClean() {
      this.formInline = {
        user: ''
      }
    },
    // 弹出层确认按钮
    async addSubject() {
      try {
        await this.$refs.dialogForm.validate()
        if (this.dialogForm.id) {
          await update(this.dialogForm)
          this.$message.success('ok')
        } else {
          await add(this.dialogForm)
          // this.dialogVisible = false
        }
        this.dialogVisible = false
        this.dialogForm = {
          isFrontDisplay: true,
          subjectName: null,
          id: null
        }
        this.getSubjectList()
      } catch (err) {
        console.log(err)
      }
    },

    // 弹出层确认和取消
    handleClose(done) {
      done()
      // this.$confirm('确认关闭？')
      //   .then((_) => {
      //     done()
      //   })
      //   .catch((_) => {})
    },
    // 修改学科
    async editSubject(id) {
      // console.log(id)
      // this.dialogForm.id = id
      try {
        const { data } = await detail({ id })
        // console.log(data)
        this.dialogForm = data
        this.$nextTick(() => {
          this.dialogVisible = true
        })
        // this.switchH.isOp = console.log(this.dialogForm)
      } catch (err) {
        console.log(err)
      }
    },
    // 点击删除学科
    delSubject(id) {
      this.$confirm('确认关闭？')
        .then(async (_) => {
          await remove({ id })
          this.getSubjectList()
        })
        .catch((_) => {})
    },
    // 关闭弹出层
    diaClose() {
      console.log(1)
      this.dialogForm = {
        isFrontDisplay: 1,
        subjectName: null,
        id: null
      }
    }
  }
}
</script>

<style scoped>
/* .test {
  background-color: antiquewhite;
} */
</style>
